<template>
  <Modal v-model="bindPhonePop" width="32" :closable="false" :mask-closable="false" class-name="vertical-center-modal">
    <div slot="header" class="head-sty">
      <div class="title">绑定手机号</div>
      <Icon type="md-close" class="close" @click="closeMet()" />
    </div>
    <div class="content-sty">
      <div class="label-text">绑定后，您的订单或包裹出现问题后会给您发送短信</div>
      <div class="code-sty">
        <Select :label-in-value="true" v-model="form.internationalAreaCode" filterable class="select-sty">
          <Option v-for="(item, index) in regionCodeList" :label="'+' + item.code" :value="item.code" :key="index">
            <div class="region-code">
              <!-- <img class="region-code-icon" :src="item.flagImg" alt="" /> -->
              <span class="select-list">
                <span class="country-text">{{ item.regionCountry }}</span>
                <span class="code-text">（+{{ item.code }}）</span>
              </span>
            </div>
          </Option>
        </Select>
        <Input v-model="form.mobile" />
      </div>
      <div class="code-rules">
        <Input placeholder="请输入6位数验证码" v-model="form.code" />
        <div v-if="isAgainGet" class="time" @click="getCode()">获取验证码</div>
        <div v-else class="count-time">重新获取 {{ countdown }}s</div>
      </div>
    </div>
    <div slot="footer" class="handle-sty">
      <Button class="cancel-btn" @click="closeMet()">取消</Button>
      <Button type="primary" class="save-btn" @click="confirmMet()">验证</Button>
    </div>
  </Modal>
</template>
<script>
import { mapState } from "vuex";
import { debounce } from "@/common/common";
import { getMobile, getMobileCheck, getBindPhone } from "@/api/user";

export default {
  data() {
    return {
      bindPhonePop: false,
      form: {
        internationalAreaCode: '86',
        type: 4
      },
      isAgainGet: true,
      countdown: 120,
      timer: null
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      userInfo: state => state.user.userInfo,
      regionCodeList: (state) => {
        // 国际区号
        let list = [];
        if (state.config.config) {
          list = state.config.config.regionCodeList;
        }
        return list;
      },
    })
  },
  methods: {
    open() {
      this.bindPhonePop = true;
    },
    closeMet() {
      this.bindPhonePop = false;
      // 如果在两分钟有效期内关闭先保留数据
      const locGetTime = localStorage.getItem('getCodeTime');
      if (!locGetTime) {
        this.form.code = '';
        this.form.mobile = '';
        this.form.internationalAreaCode = '86';
      }
    },
    confirmMet() {
      if (!this.form.mobile) {
        this.$Message.error('请输入手机号')
        return
      }
      if (!this.form.code) {
        this.$Message.error('请输入验证码')
        return
      }
      if (isNaN(this.form.mobile)) {
        this.$Message.error('请输入正确格式的手机号!');
        return;
      }
      getBindPhone(this.form).then((res) => {
        if (res.code == 200) {
          this.bindPhonePop = false;
          this.form.code = '';
          this.form.mobile = '';
          this.form.internationalAreaCode = '86';
          this.$Message.success('绑定成功！');
        }
      })
    },
    // 获取验证码
    getCode() {
      if (!this.form.mobile) {
        this.$Message.error('请输入手机号');
        return
      }
      if (isNaN(this.form.mobile)) {
        this.$Message.error('请输入正确格式的手机号');
        return;
      }
      // 判断手机号是否被绑定过，如果没被绑定过再获取手机验证码
      getMobileCheck(this.form).then((res) => {
        if (res.code == 200) {
          getMobile(this.form).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.message);
              this.isAgainGet = false;
              localStorage.setItem('getCodeTime', new Date())
              this.timer = setInterval(() => {
                if (this.countdown > 0) {
                  this.countdown--;
                } else {
                  localStorage.removeItem('getCodeTime');
                  clearInterval(this.timer);
                  this.isAgainGet = true;
                }
              }, 1000);
            }
          })
        } else {
          this.$webToastObj({
            message: '手机号已存在！',
            time: 2000
          });
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 12px;
}

:deep(.ivu-modal-header) {
  border: none;
  padding: 32px 23px 8px 32px;
}

:deep(.ivu-modal-body) {
  padding: 8px 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 8px 32px 32px 32px;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }

    .close {
      color: #1E1714;
      font-size: 36px;
      font-weight: 500;
      cursor: pointer;
    }
  }

  .content-sty {
    .label-text {
      font-weight: 400;
      font-size: 20px;
      color: #767B93;
      line-height: 23px;
      margin-bottom: 32px;
    }

    .code-sty {
      height: 68px;
      background: #F5F6FA;
      border-radius: 8px 8px 8px 8px;
      padding: 0 24px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      :deep(.ivu-input-wrapper) {
        width: 75%;

        .ivu-input {
          height: 68px;
          background: none;
          border: none;
          height: 68px;
          font-weight: 400;
          font-size: 20px;
          line-height: 68px;
          padding: 0;
          background: none;
          text-align: right;

          .ivu-input:hover {
            border: none;
          }

          .ivu-input:focus {
            box-shadow: none;
          }
        }
      }

      .select-sty {
        width: 97px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;

        .search-input {}

        :deep(.ivu-select-selection) {
          height: 48px;
          border: none;

          .ivu-select-input {
            height: 48px;
            line-height: 48px;
            font-weight: 400;
            font-size: 20px;
          }

          .ivu-select-arrow {
            font-size: 24px;
            color: #1E1714;
          }
        }

        :deep(.ivu-select-dropdown) {
          width: 466px;
          height: 492px;
          background: #FFFFFF;
          box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.05);
          border-radius: 8px 8px 8px 8px;
          padding: 16px 20px;
          max-height: 492px;
          overflow: hidden;

          .ivu-select-dropdown-list {
            height: 460px;
            overflow: auto;

            .ivu-select-item {
              padding: 12px 18px;

              .region-code {
                display: flex;
                align-items: center;

                .select-list {
                  display: inline-flex;
                  align-items: center;
                  gap: 16px;

                  .country-text {
                    min-width: 30px;
                    font-weight: 500;
                    font-size: 18px;
                    color: #1E1714;
                    line-height: 18px;

                  }

                  .code-text {
                    font-weight: 500;
                    font-size: 18px;
                    color: #767B93;
                    line-height: 18px;
                  }
                }

                .region-code-icon {
                  width: 30px;
                  overflow: hidden;
                  margin-right: 2px;
                }
              }
            }

            .ivu-select-item:hover {
              background: #FFF2F5;
              border-radius: 4px 4px 4px 4px;
            }
          }
        }
      }

      .code {
        font-weight: 500;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
      }
    }

    .code-rules {
      height: 68px;
      background: #F5F6FA;
      border-radius: 8px 8px 8px 8px;
      padding: 0 24px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      :deep(.ivu-input-wrapper) {
        // width: 75%;

        .ivu-input {
          height: 68px;
          background: none;
          border: none;
          height: 68px;
          font-weight: 400;
          font-size: 20px;
          line-height: 68px;
          padding: 0;
          background: none;

          .ivu-input:hover {
            border: none;
          }

          .ivu-input:focus {
            box-shadow: none;
          }
        }
      }

      .time {
        font-weight: 400;
        font-size: 20px;
        color: #FF186B;
        line-height: 23px;
        padding-left: 20px;
        text-wrap: nowrap;
        cursor: pointer;
      }

      .count-time {
        font-weight: 400;
        font-size: 20px;
        color: #FF67A2;
        line-height: 23px;
        text-wrap: nowrap;
        padding-left: 20px;
      }
    }

    .notice-text {
      font-weight: 500;
      font-size: 18px;
      color: #1E1714;
      line-height: 21px;
    }

    :deep(.ivu-input-group) {
      .ivu-input {
        height: 54px;
      }

      .ivu-input-group-append {
        height: 54px;
        font-weight: 600;
        font-size: 20px;
        color: #1E1714;
        line-height: 26px;
      }
    }
  }

  .handle-sty {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 24px;

    .save-btn {
      min-width: 112px;
      height: 46px;
      background-color: #FF186B;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 19px;
      border-radius: 8px;
    }

    .cancel-btn {
      min-width: 112px;
      height: 46px;
      font-weight: 600;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
      border-radius: 8px;
    }

    .cancel-btn:hover {
      border-color: #e3e5e8;
    }

    .cancel-btn:focus {
      box-shadow: 0 0 0 1px #e3e5e846;
    }
  }
}
</style>
